/*
 * @Author: funlee 
 * @Email: i@funlee.cn 
 * @Date: 2017-12-11 16:17:29 
 * @Last Modified time:   2017-12-11 16:17:29 
 * @Description: 地图导航 -- 控制视图 -- 一个有意义的坐标并不是我们看上去那样简单
 *               坐标转换：
 *               ol.proj.transform(coordinate, source, destination)
 * 
 *               coordinate : ol.Coordinate类型的坐标
 *               source     : 当前坐标所用的坐标系
 *               destination: 转换后的坐标所用的坐标系
 *        
 */
import ol from 'openlayers'
import 'openlayers/dist/ol.css'
import logo from '../../img/logo.png'

export default () => {
  console.log('render a map')
  var map = new ol.Map({
    controls: ol.control.defaults({
      attributionOptions: ({
        collapsible: false
      })
    }),
    logo: {
      src: logo,
      href: 'http://www.openstreetmap.org/'
    },
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM()
      })
    ],
    view: new ol.View({
      // 设置成都为地图中心，此处进行坐标转换， 把EPSG:4326的坐标，转换为EPSG:3857坐标，因为ol默认使用的是EPSG:3857坐标
      center: ol.proj.transform([104.06, 30.67], 'EPSG:4326', 'EPSG:3857'),
      zoom: 10
    }),
    target: 'map'
  });

  var view = map.getView()
  var mapCenter = view.getCenter()

  // 向左移动地图
  document.querySelector('.moveToLeft').addEventListener('click', function () {
    // 让地图中心的x值增加，即可使得地图向左移动，增加的值根据效果可自由设定
    mapCenter[0] += 50000
    view.setCenter(mapCenter)
    map.render()
  })

  // 向右移动地图
  document.querySelector('.moveToRight').addEventListener('click', function () {
    // 让地图中心的x值减少，即可使得地图向左移动，增加的值根据效果可自由设定
    mapCenter[0] -= 50000
    view.setCenter(mapCenter)
    map.render()
  })

  // 向上移动地图
  document.querySelector('.moveToUp').addEventListener('click', function () {
    // 让地图中心的y值减少，即可使得地图向上移动，减少的值根据效果可自由设定
    mapCenter[1] -= 50000
    view.setCenter(mapCenter)
    map.render()
  })

  // 向下移动地图
  document.querySelector('.moveToDown').addEventListener('click', function () {
    // 让地图中心的y值增加，即可使得地图向上移动，减少的值根据效果可自由设定
    mapCenter[1] += 50000
    view.setCenter(mapCenter)
    map.render()
  })

  // 移动到成都
  document.querySelector('.moveToChengDu').addEventListener('click', function () {
    // 设置地图中心为成都的坐标，即可让地图移动到成都
    view.setCenter(ol.proj.transform([104.06, 30.67], 'EPSG:4326', 'EPSG:3857'))
    map.render()
  })

  // 放大地图
  document.querySelector('.zoomIn').addEventListener('click', function () {
    // 让地图的zoom增加1，从而实现地图放大
    view.setZoom(view.getZoom() + 1)
  })

  // 缩小地图
  document.querySelector('.zoomOut').addEventListener('click', function () {
    // 让地图的zoom减小1，从而实现地图放大
    view.setZoom(view.getZoom() - 1)
  })

}